<template>
  <div class="gym">
    <div class="upgrade">
      <el-row :gutter="20">
        <el-form
          :model="gymForm"
          :label-position="labelPosition"
          class="gymForm"
          ref="gymForm"
          :rules="rules"
          label-width="60px"
          show-overflow-tooltip
        >
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item class="gymlabel" label="力量" prop="gymnum">
                <div class="gymtips">
                  锻炼力量会增强你的力量伤害，增加在物理攻击、物理技能中的伤害收益。
                </div>
                <div class="gyminfo">
                  {{ user_gym_info.strength }}
                </div>
                <template>
                  <el-input-number
                    v-model="gymForm.str"
                    :min="0"
                    :max="999"
                  ></el-input-number>
                </template>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  class="submit_btn"
                  @click="submitForm('gymForm', gymForm.str, 'strength')"
                  >锻 炼</el-button
                >
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item class="gymlabel" label="体质" prop="gymnum">
                <div class="gymtips">
                  炼体能够使你体质强壮应对各种伤害，增加在受到物理攻击、魔法攻击时的伤害减免。
                </div>
                <div class="gyminfo">
                  {{ user_gym_info.defense }}
                </div>
                <template>
                  <el-input-number
                    v-model="gymForm.def"
                    :min="0"
                    :max="999"
                  ></el-input-number>
                </template>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  class="submit_btn"
                  @click="submitForm('gymForm', gymForm.def, 'defense')"
                  >炼 体</el-button
                >
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item class="gymlabel" label="灵力" prop="gymnum">
                <div class="gymtips">
                  聚灵能够让扩大你体内的灵力储备，解除某些法术的使用限制，增加你在法术攻击中造成的伤害。
                </div>
                <div class="gyminfo">
                  {{ user_gym_info.magic }}
                </div>
                <template>
                  <el-input-number
                    v-model="gymForm.mag"
                    :min="0"
                    :max="999"
                  ></el-input-number>
                </template>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  class="submit_btn"
                  @click="submitForm('gymForm', gymForm.mag, 'magic')"
                  >聚 灵</el-button
                >
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item class="gymlabel" label="速度" prop="gymnum">
                <div class="gymtips">
                  练腿能够使你的腿部力量更强以应对各种情况，增加你在战斗中的速度和闪避概率。
                </div>
                <div class="gyminfo">
                  {{ user_gym_info.speed }}
                </div>
                <template>
                  <el-input-number
                    v-model="gymForm.spd"
                    :min="0"
                    :max="999"
                  ></el-input-number>
                </template>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  class="submit_btn"
                  @click="submitForm('gymForm', gymForm.spd, 'speed')"
                  >练 腿</el-button
                >
              </el-form-item>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "gym",
  data() {
    let checkNum = (rule, value, callback) => {
      setTimeout(() => {
        if (value <= 0) {
          callback(new Error("修炼数值必须大于0"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      labelPosition: "top",
      user_gym_info: {},
      gymForm: {
        str: 0,
        def: 0,
        mag: 0,
        spd: 0,
      },
      user_info: {},
      rules: {
        gymnum: [{ validator: checkNum, trigger: "blur" }],
      },
    };
  },
  created() {
    this.getUserGymInfo();
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    submitForm(formName, gymnum, gymtype) {
      if (!gymnum) {
        this.$message({
          showClose: true,
          message: "提示！您当前需要修炼的数值为空或为'0'，请输入有效值！",
          type: "warning",
        });
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let gym_post_data = {
              user: this.user.name,
              gymnum: gymnum,
              gymtype: gymtype,
            };
            this.$axios
              .post("/api/gyms/UserGoGym", gym_post_data)
              .then((res) => {
                this.$message({
                  showClose: true,
                  message: "恭喜你，修炼成功！",
                  type: "success",
                });
                this.getUserGymInfo();
              });
          } else {
            this.$message({
              showClose: true,
              message: "修炼失败！",
              type: "error",
            });
          }
        });
      }
    },
    getUserGymInfo() {
      // 获取玩家数据
      this.$axios
        .get("/api/users/getUserGymInfo")
        .then((res) => {
          this.user_gym_info = res.data;
          console.log(this.user_gym_info);
        })
        .catch((err) => console.log(err));
    },
  },
};
</script>
<style scoped>
.upgrade {
  padding-top: 3%;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #ebffc7;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  width: 375px;
  height: 25%;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.submit_btn {
  width: 100%;
}
.gyminfo {
  width: 100%;
  height: 50%;
  padding-bottom: 3%;
}
.gymlabel {
  background-color: #d0ffc7;
}
.gymtips {
  background-color: #dbfad6;
  font-size: 95%;
  text-align: left;
  letter-spacing: 2.5px;
}
</style>